function bump(obj1,obj2){
	// 用变量将信息存起来，减少不必要的函数调用，提高性能
	var obj1Info = obj1.getBoundingClientRect();
	var obj2Info = obj2.getBoundingClientRect();
	var t1 = obj1Info.top,
		l1 = obj1Info.left,
		r1 = obj1Info.right,
		b1 = obj1Info.bottom;
		
	var t2 = obj2Info.top,
		l2 = obj2Info.left,
		r2 = obj2Info.right,
		b2 = obj2Info.bottom;
	
	if(r1 < l2 || l1 > r2 || t1 > b2 || b1 < t2){
		console.log("没有");
		return false;
	}else{
		console.log("碰到");
		return true;
	}
}

// 点击开始，切换界面
var startBtn = document.querySelector(".box button");

startBtn.addEventListener("click",()=>{
	startBtn.parentNode.style.transform = "translateX(-100%)";
});
var web = document.querySelector(".web")

//随机创建圆
function getCircle(){
	var div = document.createElement("div");
	var clientW = web.clientWidth;
	var clientH = web.clientHeight;
	
	//随机生成宽高，且直径不小于15
	var divW = divH = Math.floor(Math.random()*40+15);
	
//	随机生成top值
	var divT = Math.floor(Math.random()*clientH)
	var divL = Math.floor(Math.random()*clientW)
	
	//防止超出屏幕,如果超出最大top/left，则让球贴边
	divT > clientH - divH ? divT = clientH - divH : '';
	divL > clientW - divW ? divL = clientW - divW : '';
	
	div.style.width = `${divW}px`;
	div.style.height = `${divH}px`;
	div.style.top = `${divT}px`;
	div.style.left = `${divL}px`;
	div.style.borderRadius = "50%";
	div.style.backgroundColor = "white";
	div.style.position = "absolute";
	var allBall = document.querySelectorAll(".web div");
	allBall.forEach((e)=>{
		e.classList.remove("lastOne")
	})
	div.classList.add("lastOne");
	web.appendChild(div);
	return div
}
getCircle()

//事件委托
var firstBall = document.querySelector(".web div");
firstBall.addEventListener("click",ballEvent);

//球该做的事情 --> 新增球
function ballEvent(){
	if(this.classList.contains("lastOne")){
		console.log("是最后一个")
	}else{
		alert("游戏结束")
		return
	}
	var allBall = document.querySelectorAll(".web div");
//	通过 getCircle 的返回值 拿到每次新创建出来的圆,为下一步碰撞检测提供检测对象
	var newCircle = getCircle();
	console.log(newCircle);
	
	(function check(target){
		allBall.forEach((e)=>{
			//如果新生成的圆与已有的圆碰撞，则移除新圆并重新创建新圆
			if(bump(e,target)){
	//			1.先移除
				target.remove();
	//			2.再创建
				var newCircle = getCircle();
	//			3.递归调用判断
				check(newCircle);
			}else{
				addEvent();
			}
		});
	}(newCircle));
};


//var firstBall = document.querySelector(".web div");
//web.addEventListener("click",(event)=>{
//	var allBall = document.querySelectorAll(".web div");
////	通过 getCircle 的返回值 拿到每次新创建出来的圆,为下一步碰撞检测提供检测对象
//	if(event.target == web.lastChild){
//		var newCircle = getCircle();
//		console.log(newCircle)
//		
//		(function check(target){
//			allBall.forEach((e)=>{
////				if(e!=newCircle){
////					alert("游戏结束！")
////				}
//				//如果新生成的圆与已有的圆碰撞，则移除新圆并重新创建新圆
//				if(bump(e,target)){
//		//			1.先移除
//					target.remove();
//		//			2.再创建
//					var newCircle = getCircle();
//		//			3.递归调用判断
//					check(newCircle);
//				};
//			});
//		}(newCircle));
//	}
//})


function addEvent(){
	var allBall = document.querySelectorAll(".web div")
	allBall.forEach((e)=>{
		e.addEventListener("click",ballEvent)
	})
}
